<template>
  <el-dialog
    center
    v-model="showAlarmRecords"
    title="Alarm Records"
    @close="closeDialog"
  >
    <el-button style="margin-bottom: 20px" type="primary" @click="exportDeviceRecord"
      >Export</el-button
    >
    <el-table
      :data="tableData"
      border
      style="width: 100%; box-sizing: border-box"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        prop="sn"
        label="SN"
        :align="'center'"
        width="160"
      />
      <el-table-column
        prop="info.name"
        label="Nickname"
        :align="'center'"
        width="120"
      />
      <el-table-column
        prop="info.address"
        label="Address"
        :align="'center'"
        width="220"
      />
      <el-table-column
        prop="info.room_no"
        label="Room"
        :align="'center'"
        width="120"
      />
      <el-table-column
        label="Notice Type"
        :align="'center'"
        width="180"
      >
        <template #default="scope">
          {{ scope.row.resource.type == 1 ? 'Alarm' : 'Fault' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="resource.name"
        label="Sensor Name"
        :align="'center'"
        width="120"
      />
      <!-- <el-table-column
        label="Sensor Type"
        :align="'center'"
        width="160"
      >
      </el-table-column> -->
       <el-table-column
        prop="created_at"
        label="Alarm Time"
        :align="'center'"
        width="220"
      />
    </el-table>
    <el-row :gutter="20">
      <el-col :span="10" :offset="10">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          class="mt-4"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import API from "api";

export default {
  name: "alarmRecords",
  props: {
    showAlarmRecords: {
      type: Boolean,
      default: () => false,
    },
  },

  setup(props, ctx) {
    let state = reactive({
      page: 1,
      total: 0,
      tableData: [],
      value: [],
    });
    onMounted(() => {
      getLogs();
    });

    const getLogs = () => {
      API.alarmLogs({ page: state.page }).then((res) => {
        if (res.code == 0) {
          state.total = res.data.total;
          state.tableData = res.data.list;
        }
      });
    };
    // 关闭弹窗事件
    const closeDialog = () => {
      ctx.emit("changeAlarmDialog", false);
    };

    // 表单复选事件
    const handleSelectionChange = (val) => {
      state.value = val;
    };

    const changePage = (page) => {
      state.page = page;
      getLogs();
    };

    const exportDeviceRecord = () => {
      API.exportAlarmRecord().then(res => {
        window.open(res.data.url)
      })
    }

    return {
      exportDeviceRecord,
      changePage,
      closeDialog,
      handleSelectionChange,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  width: 80vw;
}
</style>